<template>
	<swiper class="info-container" @change="swiperchange" vertical="true" duration="100">
		<swiper-item
			v-for="(info, index) in infoList"
			:key="index"
			class="info-item"
		>
			<view
				v-for="(inf, ind) in info.text_content" 
				:key="ind"
			>
				<uni-transition
					:show="index === currentPage"
					:mode-class="['fade', 'zoom-in']"
					:duration="2000"
				>
					<div>{{ inf }}</div>
				</uni-transition>
			</view>
		</swiper-item>
	</swiper>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { searchInfo } from "../../service";
import { createToastComp } from "../../utils/comp";

const infoList = ref([]);
const currentPage = ref(0);

const swiperchange = (e: any) => {
	const current = e.detail?.current ?? null;
	if (current == null) return;
	const item = infoList.value[current];
	if (item == null) return;
	currentPage.value = current;
}

const getSearchInfo = async () => {
	const res: any = await searchInfo({});
	if (res.status === "success") {
		infoList.value = (res?.data || []).map((i: any) => ({
			...i,
			text_content: i.text_content ? i.text_content.split("_") : [],
		}));
	} else {
		createToastComp({ title: res.msg || "错误" }, "error");
	}
};

onMounted(() => {
	getSearchInfo();
});
</script>

<style lang="less" scoped>
.info-container {
	height: 100vh;
}
.info-item {
	background-color: #f5f5f5;
	color: #212121;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	letter-spacing: 1px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
</style>
